<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>聆听乐器生产系统</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="res/css/index/x-admin.css" media="all">
        <link crossorigin="anonymous" integrity="sha384-yzOI+AGOH+8sPS29CtL/lEWNFZ+HKVVyYxU0vjId0pMG6xn7UMDo9waPX5ImV0r6" href="https://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" src="https://lib.baomitu.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	<script src="res/layuis/layui.js" charset="utf-8"></script>
		<script crossorigin="anonymous" integrity="sha384-hwBKpsoiRv7DCatNDBk5X7DXMafNnRzdoBy9G8ja/qZpoFR7mziSQjnnFk5F68ow" src="https://lib.baomitu.com/echarts/4.2.0-rc.2/echarts.min.js"></script> 	
    </head>
    <body>
    <style type="text/css">
	legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
	legend a{ color:#666;} legend a:hover{ text-decoration:none;}
	.layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
	</style>
        <div class="x-body">
            <blockquote class="layui-elem-quote"  id="companyName" style="text-align: center;"></blockquote>
<div class="row">
			<div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-yellow-green"> <i class="fa fa-cubes"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                    	<a><h1 id="Stock"></h1></a>
                        <a><span>库存数量</span></a>    
                    </div>
                </section>
            </div>

			<div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-blue"><i class="fa fa-calculator" aria-hidden="true"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a><h1 id="GrossProceed"></h1></a>
                        <a><span>乐器总销售</span></a>
                    </div>
                </section>
            </div>
            
            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-commred"> <i class="fa fa-credit-card" aria-hidden="true"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                       <a><h1 id="Finance"></h1></a>
                       <a><span>财务总金额</span></a>
                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-dark-green"><i class="fa fa-shopping-cart"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                    	<a><h1 id="SalesToday"></h1></a>
                        <a><span>今日销售量</span></a>
                    </div>
                </section>
            </div>
            
        </div>
            
            <fieldset class="layui-elem-field layui-field-title site-title">
              <legend><a name="default">数据统计</a></legend>
            </fieldset>
             
        <!--相关统计-->
        <div class="row">
        <div class="col-sm-6" style="width: 100%">
	         <section class="panel">
	         	 <div class="panel-heading">库存预警</div>
	             <div class="panel-body" id='warning'>
	                
	             </div>
	         </section>
	        </div>
	        <div class="col-sm-6">
	         <section class="panel">
	         	 <div class="panel-heading echartsOne"></div>
	             <div class="panel-body">
	                 <div class="echarts" id="type" style="width:100%; height:350px"></div>
	             </div>
	         </section>
	        </div>
	       <div class="col-sm-6">
	         <section class="panel">
	                    <div class="panel-heading echartsFour"></div>
	                    <div class="panel-body">
	                        <div class="echarts" id="product" style="height:350px"></div>
	                    </div>
	                </section>
	        </div>
	        <div class="col-sm-6" style="width: 100%;">
	         <section class="panel">
	                    <div class="panel-heading echartsTwo"></div>
	                    <div class="panel-body">
	                    	         <input type="text"  class="layui-input" id="startTime" style="width: 224px;height: 38px;border: none;" placeholder="根据年份查看">
	                        <div class="echarts" id="Crash&Dash" style="height:550px;width: 90%;"></div>
	                    </div>
	                </section>
	        </div>
	         
	         <div class="col-sm-6" style="width: 100%;">
	         <section class="panel">
	                    <div class="panel-heading echartsThree"></div>
	                    <div class="panel-body">
	                    	     <input type="text"  class="layui-input" id="startTimeTwo" style="width: 224px;height: 38px;border: none;" placeholder="根据年份查看">
	                        <div class="echarts" id="years" style="height:550px;width: 90%;"></div>
	                    </div>
	                </section>
	        </div>
	        

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  $.post("/Listen/listenBackstageUser/selectUser.action",null,function(mes){
	  if(mes.datas!=0){
		  $("#companyName").html('<p>欢迎进入<span style="color:#2299ee;font-size: 22px;margin: 0px 10px">'+mes.object.companyName+'</span>聆听乐器生产系统！</p>');
	  }
  },'json')
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”
      
      
      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  
  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);
  
  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });
  
});
</script>
<script type="text/javascript" src="res/js/welcome/welcome.js"></script>

	        </div>
        </div>
        <div class="layui-footer footer footer-demo">
            
        </div>
    </body>
</html>